<template>
	<div class="screen_wrap echarts_box flex_wrap">
        <corner></corner>
        <title1 title="近六个月运维次数统计"></title1>
		<div class="flex_body">
			<e-chart :options="option" style="height:100%"></e-chart>
		</div>
	</div>	
</template>

<script>
	import {getMaintenance} from "@/api/bigScreen/bigScreen";
	import corner from '../public/corner'
	import title1 from '../public/title1'		
	export default {
		components: {
			corner,title1
		},				
		data() {
			return {
				option: null,
                xData:[],
                yData:[]
			}
		},
		mounted() {
			this.initData()
			this.init()
		},
		methods: {
			initData(){
				getMaintenance().then(res=>{					
					res.data.data.forEach(item=>{
						this.xData.push(item.time)
						this.yData.push(item.num)
					})
				})
			},
			init() {
				this.option = {					    
					 	grid: {
							left: '12%',
							top: '20%',
							bottom: '12%',
							right: '12%'
						},
						xAxis: {
							data: this.xData,
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: 'rgba(255, 129, 109,.1)',
									width: 2 //这里是为了突出显示加上的
								}
							},
							axisLabel: {
								textStyle: {
									color: this.$fontColor,
									fontSize: 12
								}
							}
						},
						yAxis: {
							show: false,
							axisTick: {
								show: false
							},
							axisLine: {
								lineStyle: {
									color: '#fff',
									width: 1 //这里是为了突出显示加上的
								}
							},
							axisLabel: {
								textStyle: {
									color: '#fff'
								}
							},
							splitArea: {
								areaStyle: {
									color: 'rgba(255,255,255,.5)'
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									color: 'rgba(255, 129, 109, 0.1)',
									width: 0.5,
									type: 'dashed'
								}
							}
						},
						series: [{
							type: 'pictorialBar',
							barCategoryGap: '-130%',
							symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
							label: {
								show: true,
								position: 'top',
								distance: 15,
								color: '#08DFFE',
								fontWeight: 'bolder',
								fontSize: 15,
							},
							itemStyle: {
								normal: {
									color: {
										type: 'linear',
										x: 0,
										y: 0,
										x2: 0,
										y2: 1,
										colorStops: [{
												offset: 0,
												color: '#9A11FF'
											},
											{
												offset: 1,
												color: '#08DFFE'
											}
										],
										global: false //  缺省为  false
									}
								},
								emphasis: {
									opacity: 1
								}
							},
							data: this.yData
						}]
					};

			}
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		flex-direction: column;
	}	
	.body {
		flex: 1;
	}
</style>